<template>
  <div class="home basic-container">
    <div class="home-left">
      <el-row>
        <el-card class="todo"><businessProcessing></businessProcessing></el-card>
        <el-card class="guide"><guideCard></guideCard></el-card>
      </el-row>
      <el-row>
        <el-card class="my-project"><myProject /></el-card>
      </el-row>
      <el-row>
        <el-card class="board"><statisticalBoard></statisticalBoard></el-card>
      </el-row>
    </div>
    <div class="home-right">
      <el-card class="notice"><noticeCard /></el-card>
      <el-card class="shortcut"><quickEntry></quickEntry></el-card>
      <el-card class="calendar"><calendarCard /></el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import statisticalBoard from './components/statistical-board.vue';
import guideCard from './components/guide-card.vue';
import myProject from './components/my-project.vue';
import noticeCard from './components/notice-card.vue';
import calendarCard from './components/calendar-card.vue';
import quickEntry from './components/quick-entry.vue';
import businessProcessing from './components/business-processing.vue';
export default {
  name: 'viewsWelIndex',
  data() {
    return {
      activeNames: ['1', '2', '3', '5'],
      logActiveNames: ['30'],
    };
  },
  components: {
    guideCard,
    myProject,
    noticeCard,
    calendarCard,
    quickEntry,
    businessProcessing,
    statisticalBoard,
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    handleChange(val) {
      window.console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-font-size {
  font-size: 14px;
}
:deep(.el-card__body) {
  padding: 0;
}
.home {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  .home-left {
    width: calc(100% - 480px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    margin-right: 16px;
    .el-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
      height: 100%;
      margin-bottom: 16px;
      .todo {
        width: 596px;
        height: 370px;
      }
      .guide {
        width: 561px;
        height: 370px;
      }
      .my-project {
        flex: 1;
        height: 351px;
      }
      .board {
        flex: 1;
        height: 430px;
      }
    }
  }
  .home-right {
    position: fixed;
    top: 112px;
    right: 2px;
    width: 480px;
    .el-card {
      margin-bottom: 11px;
    }
    .notice {
      height: 179px;
    }
    .shortcut {
      height: 210px;
    }
    .calendar {
      height: 462px;
    }
  }
}
</style>
